<template>
	<view class="page-wrapper">
		<div class="content">
			<div class="address" @click="selectAddress">
				<div v-show="adShow">
					<span>
						<h3 v-text="address.name"></h3>
						<p v-text="address.mobile"></p>
					</span>
					<p v-text="address.province + ' ' + address.city + ' ' + address.district + ' ' + address.street"></p>
				</div>
				<p v-show="!adShow">请填写服务地址</p>
				<span><image src="../../../static/img/public/right.png" mode="widthFix"></image></span>
			</div>

			<div class="service-num">
				<!-- <h3>{{product.goods_title}}</h3>
				<p>{{product.goods_name+ '/' + product.total_count + '次'}}</p> -->
				<div v-for="(item,index) in fuwuList" class="flex align " @click="fuwuIndex = index" :style="fuwuIndex==index?'padding:10rpx 0;width: 630rpx;background-color: #027AFF;color: #ffffff;border-radius: 15rpx;margin-bottom: 12rpx;':'padding:10rpx 0;width: 630rpx;background-color: #f4f4f4;border-radius: 15rpx;margin-bottom: 12rpx;'">
					<div style="font-size: 24rpx;margin-left: 49rpx;">{{item.cat_name}}</div>
					<!-- <div style="font-size: 20rpx;margin-right: 60rpx;">{{item.text}}</div> -->
				</div>
<!-- 
				<div class="flex align between" style="">
					<div style="font-size: 24rpx;margin-left: 49rpx;">开荒保洁</div>
					<div style="font-size: 20rpx;margin-right: 60rpx;">服务价值30.50</div>
				</div> -->
			</div>
			<!-- 	<div :style="(type !== 4 && type !== 6) ? 'display: none;' : ''" class="service-num">
				<h3>{{product.goods_title}}</h3>
				<p>{{product.goods_name}}</p>
			</div> -->
			<div class="service-num">
				<h3>预估工作</h3>
				<!-- <h3>{{product.goods_title}}</h3>
				<p>{{product.goods_name+ '/' + product.total_count + '次'}}</p> -->
				<view style="display: flex;flex-wrap: wrap;">
					<view
						v-for="(item, index) in juliList"
						:key="index"
						@click="juliIndex = index"
						:style="
							juliIndex == index
								? 'background-color: #0973F7;color:#fff;padding: 8rpx 20rpx;margin-top: 14rpx;margin-right: 20rpx;font-size: 22rpx;'
								: 'background-color: #f4f4f4;padding: 8rpx 20rpx;margin-top: 14rpx;margin-right: 20rpx;font-size: 22rpx;'
						"
					>
						{{ item }}
					</view>
				</view>
			</div>

			<div :style="type === 1 ? '' : 'display: none;'" class="service-time">
				<span>服务时长</span>
				<div>
					<!-- <p @click="timeDecrease"></p> -->
					<span v-text="product.total_count * 4 + '小时'"></span>
					<!-- <p @click="timeIncrease"></p> -->
				</div>
			</div>

			<div class="service-date" @click="selectDate">
				<span>预约时间</span>
				<p v-text="serviceDate !== '' ? serviceDate + (serviceTime === 1 ? ' 上午' : serviceTime === 2 ? ' 下午' : ' 全天') : ''"></p>
				<span><image src="../../../static/img/public/right.png" mode="widthFix"></image></span>
			</div>

			<div class="increment" v-if="product.increment && product.increment.length > 0">
				<div @click="selectIncrement">
					<image src="../../../static/img/public/increment.png" mode="widthFix"></image>
					<span>增值服务</span>
					<p></p>
					<span><image src="../../../static/img/public/right.png" mode="widthFix"></image></span>
				</div>
				<ul>
					<li v-for="item in increment.checkedList" :key="item.id">
						<span>{{ item.name }}</span>
						<p>{{ item.title }}</p>
						<span>{{ item.price }}</span>
					</li>
				</ul>
			</div>

			<!-- <div class="pay-type">
				<radio-group >
					<div @click="togglePayType(0)">
						<image src="../../../static/img/public/balance-pay.png" mode="widthFix"></image>
						<span>
							<span>金币抵扣</span>
							<p>({{balance.balance}})</p>
						</span>
						<radio color="#0384FA" :checked="payType === 0" :disabled="isEmpty" />
					</div>
					<div @click="togglePayType(1)">
						<image src="../../../static/img/public/we-chatpay.png" mode="widthFix"></image>
						<span>微信支付</span>
						<radio color="#0384FA" :checked="payType === 1" />
					</div>
				</radio-group>
			</div> -->
		</div>
		<div class="footer">
			<span>
				<!-- <p>共计</p>
				<span>￥{{price}}</span> -->
			</span>
			<button @click="submit">预约</button>
		</div>

		<!-- 选择地址弹窗 -->
		<drawer title="地址选择" cancle overlayHide ref="drawer" confirm="添加地址" @confirm="goAddAddress">
			<ul class="address-list" v-show="adShow">
				<li v-for="item in addressList" :key="item.id" @click="toggleAddress(item)" :class="item.id === address.id ? 'active' : ''">
					<span v-text="item.name.split('')[0]" class="address-item-left"></span>
					<div class="address-item-center">
						<div class="address-item-center-top">
							<span v-text="item.name"></span>
							<p v-text="item.mobile"></p>
						</div>
						<div class="address-item-center-bottom">
							<span v-if="item.is_main === 1">默认</span>
							<p v-text="item.province + ' ' + item.city + ' ' + item.district + ' ' + item.street"></p>
						</div>
					</div>
				</li>
			</ul>
			<div class="exceed-list" v-show="adShow">
				<p>超出服务范围</p>
				<ul>
					<li v-for="item in exceedList" :key="item.id" @click="exceedHandler">
						<span v-text="item.name.split('')[0]" class="address-item-left"></span>
						<div class="address-item-center">
							<div class="address-item-center-top">
								<span v-text="item.name"></span>
								<p v-text="item.mobile"></p>
							</div>
							<div class="address-item-center-bottom">
								<span v-if="item.is_main === 1">默认</span>
								<p v-text="item.province + ' ' + item.city + ' ' + item.district + ' ' + item.street"></p>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<hEmpty v-show="!adShow" center="暂无可用地址" img="../../static/img/public/address-empty.png"></hEmpty>
		</drawer>

		<!-- 选择日期弹窗 -->
		<drawer @confirm="confirmDate" cancle overlayHide title="选择日期" height="auto" confirm="确定" ref="selectDate">
			<div class="select-date">
				<ul>
					<li v-for="item in dateList" :class="sendTime.date === item.date ? 'active' : ''" @click="toggleDate(item.date)">
						<h3 v-text="item.week"></h3>
						<p v-text="item.date.split('-')[2]"></p>
					</li>
				</ul>
			</div>
			<div class="select-time">
				<ul>
					<li v-if="sendTime.time !== 3" :class="sendTime.time === 1 ? 'active' : ''" @click="sendTime.time = 1">上午：08:00-12:00</li>
					<li v-if="sendTime.time !== 3" :class="sendTime.time === 2 ? 'active' : ''" @click="sendTime.time = 2">下午：14:00-18:00</li>
					<li v-if="sendTime.time === 3" :class="sendTime.time === 3 ? 'active' : ''">全天：08:00-18:00</li>
				</ul>
			</div>
		</drawer>

		<!-- 选择增值服务弹窗 -->
		<drawer @confirm="confirmIncrement" cancle overlayHide title="增值服务" height="60%" confirm="确定" ref="selectIncrement">
			<checkbox-group class="select-increment" @change="selectIncrementChange">
				<label v-for="item in product.increment">
					<checkbox
						:value="item.id"
						color="#0973F7"
						:checked="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1"
						:disabled="isMax && increment.checked.findIndex(item2 => item.id === parseInt(item2)) === -1"
					/>
					<span :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">{{ item.name }}</span>
					<p :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">{{ item.title }}</p>
					<span :style="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1 ? 'color: #333333' : 'color: #999999'">￥{{ item.price }}</span>
				</label>
			</checkbox-group>
		</drawer>
	</view>
</template>

<script>
import drawer from '../../../components/drawer/drawer.vue';
import { api } from '@/util/api.js';

export default {
	data() {
		return {
			address: null, //当前选中的地址
			adShow: false, //是否有地址信息
			addressList: [], //地址列表
			exceedList: [],

			type: null, //商品类型（1日常保洁、2深度保洁、3整理产品、4整洁产品、5整理课程、6整洁课程）
			goods_id: null,
			product: {}, //当前商品
			serviceLong: 4, //服务时长
			sendTime: {
				date: '',
				time: 1
			},
			serviceDate: '', //服务日期
			dateList: [], //最近一周的日期列表
			serviceTime: 1, //服务时间段
			payType: 0, //支付类型
			balance: {},

			increment: {
				checkNum: 1,
				list: [],
				checked: [],
				checkedList: [],
				total_price: 0
			},
			isMax: false,
			isEmpty: false,
			price: null,

			juliList: ['50平米以下', '50-80', '80-100', '100-120', '120平米以上'],
			juliIndex: 0,

			fuwuList: [],
			fuwuIndex: 0
		};
	},

	watch: {
		addressList(oldV, newV) {
			if (this.addressList.length !== 0 || this.exceedList.length !== 0) {
				this.adShow = true;
			} else {
				this.adShow = false;
			}
		}
		// increment(oldV,newV) {
		// 	if(this.increment.checked.length === this.product.in_number) {
		// 		this.isMax = true;
		// 	} else {
		// 		this.isMax = false;
		// 	}
		// }
	},
	methods: {
		//获取合同列表
		getCat() {
			let region_id = getApp().globalData.nowRegion.id;
			api.getCat({ region_id }, res => {
				console.log('合同列表', res);
				this.fuwuList=res.data
			});
		},

		// 获取地址列表
		getAddressList() {
			this.addressList = [];
			this.exceedList = [];
			api.getAddressList({}, res => {
				if (res.data) {
					res.data.forEach((item, index) => {
						if (getApp().globalData.nowRegion.county === '全部') {
							if (item.city === getApp().globalData.nowRegion.city) {
								this.addressList.push(item);
								if (item.is_main === 1) {
									this.addressList.unshift(this.addressList.splice(index, 1)[0]);
								}
							} else {
								this.exceedList.push(item);
							}
						} else {
							if (item.district === getApp().globalData.nowRegion.county) {
								this.addressList.push(item);
								if (item.is_main === 1) {
									this.addressList.unshift(this.addressList.splice(index, 1)[0]);
								}
							} else {
								this.exceedList.push(item);
							}
						}
					});
					this.initAddress();
				}
				this.getBanlance();
			});
		},
		//获取客户余额
		getBanlance() {
			api.getMemberBanlance({}, res => {
				this.balance = res.data;
				if (this.balance.balance <= 0) {
					this.togglePayType(1);
					this.isEmpty = true;
				} else {
					this.togglePayType(0);
					this.isEmpty = false;
				}

				//获取商品信息
				this.getGoodsInfo();
			});
		},
		togglePayType(type) {
			switch (type) {
				case 0:
					if (this.balance.balance > 0) {
						this.payType = 0;
					}
					break;
				case 1:
					this.payType = 1;
					break;
				default:
					break;
			}
		},

		getGoodsInfo() {
			uni.hideLoading();
			// api.getGoodsInfo({goods_id: this.goods_id}, res => {
			// 	this.product = res.data;

			// 	this.initPrice();
			// 	if(this.type === 1 || this.type === 3) {
			// 		// 根据次数判断是否是全天
			// 		if(res.data.total_count === 1) {
			// 			this.serviceTime = 1;
			// 		}
			// 		if(res.data.total_count === 2) {
			// 			this.serviceTime = 3;
			// 		}
			// 	}

			// })
		},
		initPrice() {
			if (this.type === 4 || this.type === 6 || this.product.is_first_buy === 0) {
				this.price = Math.round(this.product.sale_price * 100 - this.product.discount_price * 100) / 100 + this.increment.total_price;
			} else {
				this.price = this.product.first_price;
			}
		},

		selectIncrement() {
			this.$refs.selectIncrement.open();
			let obj = { ...this.increment };
			obj.checked = [];
			obj.checkedList.forEach(item => {
				obj.checked.push(item.id);
			});
			this.increment = obj;
		},
		selectIncrementChange(res) {
			let obj = { ...this.increment };
			obj.checked = res.detail.value;
			this.increment = obj;
		},
		confirmIncrement() {
			this.increment.checkedList = [];
			this.product.increment.forEach(item => {
				this.increment.checked.forEach(item2 => {
					if (item.id === parseInt(item2)) {
						this.increment.checkedList.push(item);
					}
				});
			});

			this.increment.total_price = 0;
			this.increment.checkedList.forEach(item => {
				this.increment.total_price = Math.round(this.increment.total_price * 100 + item.price * 100) / 100;
			});

			this.initPrice();
			this.$refs.selectIncrement.hide();
		},

		// 添加地址
		goAddAddress() {
			uni.navigateTo({
				url: '../../member/address/addAddress/addAddress'
			});
			// this.$refs.drawer.hide();
		},
		selectAddress() {
			this.$refs.drawer.open();
		},
		// 切换地址
		toggleAddress(payload) {
			this.address = payload;
			this.$refs.drawer.hide();
		},
		// 超出服务范围提示
		exceedHandler() {
			wx.showModal({
				title: '提示',
				content: '超出服务范围，请在首页切换区域',
				showCancel: false
			});
		},
		// 初始化选中地址
		initAddress() {
			if (this.addressList.length > 0) {
				let i = this.addressList.findIndex(item => {
					return item.is_main === 1;
				});
				if (i >= 0) {
					this.address = this.addressList[i];
				} else {
					this.address = this.addressList[0];
				}
			}
		},
		// 日期选择
		selectDate() {
			this.$refs.selectDate.open();
			this.dateList = [];
			// 获取一周的日期
			let getTime = [];
			for (let index = 0; index < 7; index++) {
				var dateTime = new Date();
				dateTime = dateTime.setDate(dateTime.getDate() + index);
				dateTime = new Date(dateTime);
				this.dateList.push({
					date: this.$format(dateTime).split(' ')[0],
					week: this.$format(dateTime).split(' ')[1]
				});
			}
			console.log('this.dateList', this.dateList);
			if (this.serviceDate === '') {
				this.sendTime.date = this.dateList[0].date;
				this.sendTime.time = this.serviceTime;
			} else {
				this.sendTime.date = this.serviceDate;
				this.sendTime.time = this.serviceTime;
			}
		},
		// 确定日期
		confirmDate() {
			this.serviceDate = this.sendTime.date;
			this.serviceTime = this.sendTime.time;
			this.$refs.selectDate.hide();
		},
		// 切换日期
		toggleDate(date) {
			this.sendTime.date = date;
		},

		// 提交表单
		submit() {
			let param = {};
			uni.showLoading({
				title: '加载中...'
			});
			if (this.address !== null) {
				//请求数据的数据  
				//地址id
				param.addr_id = getApp().globalData.nowRegion.id;
				//分类id
				param.cat_id = this.fuwuList[this.fuwuIndex].id
			
				//备注
				param.hetong_desc = this.juliList[this.juliIndex]
				
				
				
			
				// param.goods_id = this.product.goods_id;
				// param.address_id = this.address.id;
				// //区域id
				// param.region_id = getApp().globalData.nowRegion.id;
				// // 增值服务数据
				// let incrementIdArr = [];
				// this.increment.checkedList.forEach(item => {
				// 	incrementIdArr.push(item.id);
				// });
				// param.increment_id = incrementIdArr.join(',');

				// if (this.type === 1 || this.type === 3) {
					if (this.serviceDate !== '') {
						// 服务日期
						// let d = new Date(this.serviceDate);
						// param.order_time = parseInt(d.getTime());
						//签约日期
						param.qianyue_date=this.serviceDate
						// 服务时段
						// param.slot = this.serviceTime;
					} else {
						uni.showToast({
							title: '请选择服务日期',
							mask: 'true',
							icon: 'none'
						});
						return;
					}
				// }

				api.orderYuYue(param, res => {
					if (res.code === 0) {
					uni.showToast({
						title: '上传成功',
						mask: 'true',
						icon: 'success'
					});
			
						console.log(res)
					}
					setTimeout(function () {
						uni.hideLoading();
						uni.navigateBack({
							delta: 1
						});
					}, 2000);
				});
			} else {
				uni.showToast({
					title: '请选择服务地址',
					mask: 'true',
					icon: 'none'
				});
			}
		},

		// 请求支付 --> 获取结果后 --> 重定向到订单详情页面
		requestPay(res, sn) {
			let that = this;
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: res.timeStamp,
				nonceStr: res.nonceStr,
				package: res.package,
				signType: res.signType,
				paySign: res.paySign,
				success: function(e) {
					// 支付成功跳转核销码页面
					uni.redirectTo({
						url: '../paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=1&price=' + that.price
					});
				},
				fail: function(e) {
					uni.redirectTo({
						url: '../paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=0&price=' + that.price
					});
				}
			});
		}
	},
	onLoad(option) {
		// this.type = parseInt(option.type);
		// this.goods_id = parseInt(option.goods_id);
		uni.showLoading({
			title: '加载中...'
		});
	},
	onShow() {
		this.getAddressList();
		this.initAddress();
		this.getCat();
	}
};
</script>

<style scoped>
.page-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.content {
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	flex-grow: 1;
	overflow: auto;
}
.content > div {
	background-color: #ffffff;
	box-sizing: border-box;
	padding: 30rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}

.address {
	width: 100%;
	display: flex;
	align-items: center;
	min-height: 180rpx;
}
.address > div {
	flex-grow: 1;
}
.address > div > span {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.address > div > span > h3 {
	font-size: 28rpx;
	color: #333333;
}
.address > div > span > p {
	font-size: 22rpx;
	color: #999999;
	margin-left: 20rpx;
}

.address > div > p {
	font-size: 24rpx;
	color: #666666;
	margin-top: 20rpx;
	flex-grow: 1;
}

.address > p {
	flex-grow: 1;
}
.address > span {
	flex-shrink: 0;
}
.address > span > image {
	width: 17rpx;
}

/* 地址列表 */

.address-list {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx 30rpx 30rpx;
}
.address-list > li {
	width: 100%;
	background-color: #ffffff;
	margin-top: 20rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 30rpx 20rpx 30rpx 20rpx;
}
.address-list > li.active {
	background-color: #eeeeee;
}

.exceed-list {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
}
.exceed-list > p {
	width: 100%;
	font-size: 28rpx;
	color: #aaaaaa;
}
.exceed-list > ul {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0 30rpx 0;
}
.exceed-list > ul > li {
	width: 100%;
	background-color: #eeeeee;
	margin-top: 20rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 30rpx 20rpx 30rpx 20rpx;
}

.address-item-left {
	font-size: 34rpx;
	color: #a7a7a7;
	background-color: #d8d8d8;
	height: 65rpx;
	width: 65rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
	flex-shrink: 0;
}

.address-item-center {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-grow: 1;
	/* border-right: 1rpx solid #eee; */
}
.address-item-center-top {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
}
.address-item-center-top > span {
	font-size: 26rpx;
	color: #333333;
}
.address-item-center-top > p {
	color: #999999;
	font-size: 20rpx;
	margin-left: 10rpx;
}

.address-item-center-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
}
.address-item-center-bottom > span {
	font-size: 14rpx;
	color: #027aff;
	background-color: #87c6ff;
	display: inline-block;
	width: 39rpx;
	height: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10rpx;
}
.address-item-center-bottom > p {
	color: #666666;
	font-size: 22rpx;
}

.service-num {
}
.service-num > h3 {
	font-size: 30rpx;
	color: #333333;
}
.service-num > p {
	font-size: 24rpx;
	color: #999999;
	margin-top: 20rpx;
}

.service-time {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.service-time > span {
	font-size: 30rpx;
	color: #333333;
}
.service-time > div {
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-time > div > p {
	border-radius: 50%;
	border: 1rpx solid #979797;
	box-sizing: border-box;
	height: 38rpx;
	width: 38rpx;
	position: relative;
}
.service-time > div > p:nth-child(1)::before {
	content: '';
	height: 2rpx;
	width: 50%;
	background-color: #979797;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.service-time > div > p:nth-child(3)::before {
	content: '';
	height: 2rpx;
	width: 50%;
	background-color: #979797;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.service-time > div > p:nth-child(3)::after {
	content: '';
	height: 50%;
	width: 2rpx;
	background-color: #979797;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.service-time > div > span {
	font-size: 28rpx;
	color: #666666;
	vertical-align: middle;
	margin: 0 20rpx;
}

.service-date {
	display: flex;
	align-items: center;
}
.service-date > p {
	flex-grow: 1;
	font-size: 28rpx;
	color: #666666;
	text-align: end;
	box-sizing: border-box;
	padding-right: 20rpx;
}
.service-date > span {
	flex-shrink: 0;
}
.service-date > span > image {
	width: 17rpx;
}

.select-date {
	width: 100%;
}
.select-date > ul {
	width: 100%;
	overflow: auto;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0 0 14px #eee;
}
.select-date > ul > li {
	width: 120rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	padding-top: 20rpx;
}
.select-date > ul > li.active > h3 {
	color: #0973f7;
}
.select-date > ul > li.active > p {
	color: #0973f7;
	border-bottom: 1rpx solid #0973f7;
}

.select-date > ul > li > h3 {
	font-size: 24rpx;
	color: #666666;
}
.select-date > ul > li > p {
	font-size: 22rpx;
	color: #999999;
	margin-top: 30rpx;
	box-sizing: border-box;
	padding-bottom: 20rpx;
}

.increment {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.increment > div {
	width: 100%;
	display: flex;
	align-items: center;
	height: 90rpx;
}
.increment > div > image {
	width: 34rpx;
}
.increment > div > p {
	flex-grow: 1;
	text-align: end;
	text-overflow: ellipsis;
	color: #999999;
	font-size: 22rpx;
	box-sizing: border-box;
	padding: 0 20rpx;
}
.increment > div > span:nth-child(2) {
	flex-shrink: 0;
	font-size: 28rpx;
	color: #333333;
	margin-left: 30rpx;
}
.increment > div > span:last-child {
	width: 19rpx;
	flex-shrink: 0;
}
.increment > div > span:last-child > image {
	width: 100%;
}

.increment > ul {
	width: 100%;
}
.increment > ul > li {
	width: 100%;
	display: flex;
	align-items: center;
	height: 90rpx;
	border-top: 1rpx solid #eeeeee;
}
.increment > ul > li > span {
	font-size: 24rpx;
	color: #999999;
	flex-shrink: 0;
}
.increment > ul > li > p {
	font-size: 24rpx;
	color: #999999;
	flex-grow: 1;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 20rpx;
}

.pay-type {
	width: 100%;
	padding: 0 30rpx !important;
}
.pay-type div {
	width: 100%;
	display: flex;
	align-items: center;
	height: 108rpx;
}
.pay-type div:nth-child(1) {
	border-bottom: 1rpx solid #eee;
}

.pay-type div > image {
	width: 34rpx;
	flex-shrink: 0;
	margin-right: 10rpx;
}
.pay-type div > span {
	flex-grow: 1;
	display: flex;
	align-items: center;
	font-size: 28rpx;
}

.select-time {
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx;
	overflow: hidden;
}
.select-time > ul {
	margin-right: -20rpx;
	overflow: hidden;
}
.select-time > ul > li {
	width: calc(50% - 20rpx);
	margin-right: 20rpx;
	height: 90rpx;
	line-height: 90rpx;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 6rpx;
	margin-top: 20rpx;
	text-align: center;
	font-size: 24rpx;
	background-color: #fafafa;
	border: 1rpx solid transparent;
}
.select-time > ul > li.active {
	border: 1rpx solid #0973f7;
	background-color: rgba(9, 115, 247, 0.1);
	color: #0973f7;
}

.select-increment {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.select-increment > label {
	width: 100%;
	display: flex;
	align-items: center;
	border-top: 1rpx solid #eeeeee;
	box-sizing: border-box;
	padding: 30rpx 30rpx;
}
.select-increment > checkbox {
	flex-shrink: 0;
}
.select-increment > label > span:nth-child(2) {
	margin-left: 30rpx;
}
.select-increment > label > span {
	font-size: 24rpx;
	color: #999999;
	flex-shrink: 0;
}
.select-increment > label > p {
	font-size: 24rpx;
	color: #999999;
	box-sizing: border-box;
	padding: 20rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
	text-align: center;
}

.footer {
	flex-shrink: 0;
	width: 100%;
	height: 141rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: space-between;
	padding: 0 60rpx;
	background-color: #ffffff;
}
.footer > span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer > span > p {
	font-size: 22rpx;
	color: #333333;
}
.footer > span > span {
	font-size: 34rpx;
	color: #ff3232;
}
.footer > button {
	background-image: linear-gradient(to right, #0973f7, #0286fa);
	width: 426rpx;
	height: 90rpx;
	border-radius: 45rpx;
	border: none;
	color: #ffffff;
	font-size: 34rpx;
	margin: 0;
}
</style>
